<!--门票佣金-->
<template>
    <div class="mod-datasource">
        <div style="background: #fff; width: 100%; padding: 15px 15px 0 15px; height: 170px">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" size="small">
               <el-form-item label="订单号:">
                   <el-input v-model.trim="dataForm.orderNo" placeholder="订单号" clearable class="inputWidth"></el-input>
               </el-form-item>
                <el-form-item label="第三方:">
                    <el-select v-model="dataForm.supplierCode" placeholder="全部" clearable>
                        <el-option
                        v-for="item in supplierName"
                        :key="item.supplierCode"
                        :label="item.supplierName"
                        :value="item.supplierCode">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="下单用户ID:">
                   <el-input v-model.trim="dataForm.memberId" placeholder="下单用户ID" clearable class="inputWidth"></el-input>
               </el-form-item>
                <el-form-item label=" ">
                    <el-button @click="queryReset()" size="small">重置</el-button>
                    <el-button @click="getDataList()" type="primary" size="small">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
            <el-table v-loading="dataListLoading" :data="dataList" style="width: 100%" @sort-change="dataListSortChangeHandle" :header-cell-style="{background: '#DBEDF6'}">
                <el-table-column prop="orderNo" label="订单号" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="createDate" label="分佣时间" header-align="center" align="center"></el-table-column>
                <el-table-column prop="supplierName" label="第三方" header-align="center" align="center"></el-table-column>
                <el-table-column prop="totalProfit" label="金额" header-align="center" align="center">
                   <template slot-scope="scope">
                        <div>结算价:{{scope.row.scenicUnitPrice}}</div>
                        <div>游品库卖价:{{scope.row.ypkUnitPrice}}</div>
                        <div>利润:{{scope.row.totalProfit}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="orderStatus" label="下单用户" header-align="center" align="center">
                  <template slot-scope="scope">
                      <div v-for="(item,i) in scope.row.subCommissionList" :key="i">
                      <div v-if="item.type == 3">
                        <span>名称:{{item.name}}</span>
                        <span>ID:{{item.id}}</span>
                        <span>利润:{{item.singleProfit}}</span>
                      </div>
                    </div>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="上级" header-align="center" align="center" min-width="100">
                    <template slot-scope="scope">
                      <div v-for="(item,i) in scope.row.subCommissionList" :key="i">
                      <div v-if="item.type == 4">
                        <span>名称:{{item.name}}</span>
                        <span>ID:{{item.id}}</span>
                        <span>利润:{{item.singleProfit}}</span>
                      </div>
                    </div>
                    </template>
                </el-table-column>
                <el-table-column prop="sales" label="分享者" header-align="center" align="center">
                  <template slot-scope="scope">
                    <div v-for="(item,i) in scope.row.subCommissionList" :key="i">
                      <div v-if="item.type == 5">
                        <span>名称:{{item.name}}</span>
                        <span>ID:{{item.id}}</span>
                        <span>利润:{{item.singleProfit}}</span>
                      </div>
                    </div>
                    </template>
                </el-table-column>
                <el-table-column prop="sales" label="分享者上级" header-align="center" align="center">
                 <template slot-scope="scope">
                     <div v-for="(item,i) in scope.row.subCommissionList" :key="i">
                      <div v-if="item.type == 6">
                        <span>名称:{{item.name}}</span>
                        <span>ID:{{item.id}}</span>
                        <span>利润:{{item.singleProfit}}</span>
                      </div>
                    </div>
                    </template>
                </el-table-column>
                <el-table-column prop="totalProfit" label="平台利润" header-align="center" align="center"></el-table-column>
                <el-table-column prop="frozenStatus" label="状态" header-align="center" align="center">
                  <template slot-scope="scope">
                        <div v-if="scope.row.frozenStatus == 0">未冻结</div>
                        <div v-if="scope.row.frozenStatus == 1">已冻结</div>
                  </template>
                </el-table-column>

            </el-table>
            <el-pagination
                    :current-page="page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="limit"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="pageSizeChangeHandle"
                    @current-change="pageCurrentChangeHandle">
            </el-pagination>

        </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/commission/getCommissionList',
        getDataListIsPage: true,
        deleteURL: '/devtools/datasource',
        deleteIsBatch: true
      },
      dataForm: {
        orderNo: undefined,
        supplierCode: undefined,
        memberId: undefined
      },
      date: [],
      supplierName: ''
    }
  },
  components: {
  },
  created () {
    this.getList()
  },
  methods: {
    queryReset () {
      this.dataForm = {}
      this.date = null
      this.getDataList()
    },
    getList () {
      this.$http.get('/commission/getSupplierName').then(res => {
        if (res.data.code !== 0) {
          return this.$message.error(res.data.msg)
        }
        this.supplierName = res.data.data
      })
    }
  }
}
</script>
<style scoped>

</style>
